<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Font Metrics API Level 1</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="DREAM" name="w3c-status">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
  <link href="https://www.w3.org/StyleSheets/TR/2016/W3C-DREAM" rel="stylesheet" type="text/css">
  <link href="https://drafts.css-houdini.org/font-metrics-api-1/" rel="canonical">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">Font Metrics API Level 1</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">A Collection of Interesting Ideas, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://drafts.css-houdini.org/font-metrics-api-1/">https://drafts.css-houdini.org/font-metrics-api-1/</a>
     <dt>Feedback:
     <dd><span><a href="mailto:public-houdini@w3.org?subject=%5Bfont-metrics-api%5D%20YOUR%20TOPIC%20HERE">public-houdini@w3.org</a> with subject line “<kbd>[font-metrics-api] <i data-lt>… message topic …</i></kbd>” (<a href="http://lists.w3.org/Archives/Public/public-houdini/" rel="discussion">archives</a>)</span>
     <dt class="editor">Editors:
     <dd class="editor p-author h-card vcard" data-editor-id="93298"><a class="p-name fn u-email email" href="mailto:eae@google.com">Emil A Eklund</a>
     <dd class="editor p-author h-card vcard" data-editor-id="46659"><a class="p-name fn u-email email" href="mailto:stearns@adobe.com">Alan Stearns</a>
     <dt>Issue Tracking:
     <dd><a href="https://github.com/w3c/css-houdini-drafts/labels/font-metrics-api-1">GitHub Issues</a>
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
    <li>
     <a href="#measure-api"><span class="secno">2</span> <span class="content">Measure API</span></a>
     <ol class="toc">
      <li><a href="#fontmetrics-definition"><span class="secno">2.1</span> <span class="content"><code class="idl"><span>FontMetrics</span></code> object</span></a>
      <li><a href="#baseline-definition"><span class="secno">2.2</span> <span class="content"><code class="idl"><span>Baseline</span></code> object</span></a>
      <li><a href="#font-definition"><span class="secno">2.3</span> <span class="content"><code class="idl"><span>Font</span></code> object</span></a>
     </ol>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#conformance-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#partial"><span class="secno"></span> <span class="content"> Partial implementations</span></a>
       <ol class="toc">
        <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
       </ol>
      <li><a href="#testing"><span class="secno"></span> <span class="content"> Non-experimental implementations</span></a>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2>
   <p>The API exposed by this specification is designed to provide basic font metrics
for both in-document and out-of-document content.</p>
   <p class="note" role="note"><span>Note:</span> In a future version of this spec support may be added for exposing
information about individual runs of text, including information about
directionality, script, and character properties.</p>
   <h2 class="heading settled" data-level="2" id="measure-api"><span class="secno">2. </span><span class="content">Measure API</span><a class="self-link" href="#measure-api"></a></h2>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://dom.spec.whatwg.org/#document" id="ref-for-document"><c- g>Document</c-></a> {
    <a class="n" data-link-type="idl-name" href="#fontmetrics" id="ref-for-fontmetrics"><c- n>FontMetrics</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Document" data-dfn-type="method" data-export data-lt="measureElement(element)" id="dom-document-measureelement"><code><c- g>measureElement</c-></code></dfn>(<a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element"><c- n>Element</c-></a> <dfn class="idl-code" data-dfn-for="Document/measureElement(element)" data-dfn-type="argument" data-export id="dom-document-measureelement-element-element"><code><c- g>element</c-></code><a class="self-link" href="#dom-document-measureelement-element-element"></a></dfn>);
    <a class="n" data-link-type="idl-name" href="#fontmetrics" id="ref-for-fontmetrics①"><c- n>FontMetrics</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Document" data-dfn-type="method" data-export data-lt="measureText(text, styleMap)" id="dom-document-measuretext"><code><c- g>measureText</c-></code></dfn>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="Document/measureText(text, styleMap)" data-dfn-type="argument" data-export id="dom-document-measuretext-text-stylemap-text"><code><c- g>text</c-></code><a class="self-link" href="#dom-document-measuretext-text-stylemap-text"></a></dfn>, <a class="n" data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#stylepropertymapreadonly" id="ref-for-stylepropertymapreadonly"><c- n>StylePropertyMapReadOnly</c-></a> <dfn class="idl-code" data-dfn-for="Document/measureText(text, styleMap)" data-dfn-type="argument" data-export id="dom-document-measuretext-text-stylemap-stylemap"><code><c- g>styleMap</c-></code><a class="self-link" href="#dom-document-measuretext-text-stylemap-stylemap"></a></dfn>);
};
</pre>
   <p>Two methods are provided for measuring text, one for in-document measurements
and another for out-of-document measurements. Both return a <code class="idl"><a data-link-type="idl" href="#fontmetrics" id="ref-for-fontmetrics②">FontMetrics</a></code> object.</p>
   <p><code class="idl"><a data-link-type="idl" href="#dom-document-measureelement" id="ref-for-dom-document-measureelement">measureElement()</a></code> takes an <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①">Element</a></code> and returns a <code class="idl"><a data-link-type="idl" href="#fontmetrics" id="ref-for-fontmetrics③">FontMetrics</a></code> object. If the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element②">Element</a></code> is not in the document or isn’t rendered an empty <code class="idl"><a data-link-type="idl" href="#fontmetrics" id="ref-for-fontmetrics④">FontMetrics</a></code> object will be returned.</p>
   <p><code class="idl"><a data-link-type="idl" href="#dom-document-measuretext" id="ref-for-dom-document-measuretext">measureText()</a></code> takes a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①">DOMString</a></code> and a <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/css-typed-om-1/#stylepropertymapreadonly" id="ref-for-stylepropertymapreadonly①">StylePropertyMapReadOnly</a></code>, returning a <code class="idl"><a data-link-type="idl" href="#fontmetrics" id="ref-for-fontmetrics⑤">FontMetrics</a></code> object. Unless a font
is specified as a part of the styleMap the user agents default will be used.</p>
   <p class="note" role="note"><span>Note:</span> The only styles that apply to the <code class="idl"><a data-link-type="idl" href="#dom-document-measuretext" id="ref-for-dom-document-measuretext①">measureText()</a></code> method are
those that are passed in as a part of the styleMap. Document styles do not apply.</p>
   <h3 class="heading settled" data-level="2.1" id="fontmetrics-definition"><span class="secno">2.1. </span><span class="content"><code class="idl"><a data-link-type="idl" href="#fontmetrics" id="ref-for-fontmetrics⑥">FontMetrics</a></code> object</span><a class="self-link" href="#fontmetrics-definition"></a></h3>
<pre class="idl highlight def"><c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="fontmetrics"><code><c- g>FontMetrics</c-></code></dfn> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="FontMetrics" data-dfn-type="attribute" data-export data-readonly data-type="double" id="dom-fontmetrics-width"><code><c- g>width</c-></code></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①"><c- b>double</c-></a>> <dfn class="dfn-paneled idl-code" data-dfn-for="FontMetrics" data-dfn-type="attribute" data-export data-readonly data-type="FrozenArray<double>" id="dom-fontmetrics-advances"><code><c- g>advances</c-></code></dfn>;

  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="FontMetrics" data-dfn-type="attribute" data-export data-readonly data-type="double" id="dom-fontmetrics-boundingboxleft"><code><c- g>boundingBoxLeft</c-></code></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double③"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="FontMetrics" data-dfn-type="attribute" data-export data-readonly data-type="double" id="dom-fontmetrics-boundingboxright"><code><c- g>boundingBoxRight</c-></code></dfn>;

  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double④"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="FontMetrics" data-dfn-type="attribute" data-export data-readonly data-type="double" id="dom-fontmetrics-height"><code><c- g>height</c-></code></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑤"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="FontMetrics" data-dfn-type="attribute" data-export data-readonly data-type="double" id="dom-fontmetrics-emheightascent"><code><c- g>emHeightAscent</c-></code></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑥"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="FontMetrics" data-dfn-type="attribute" data-export data-readonly data-type="double" id="dom-fontmetrics-emheightdescent"><code><c- g>emHeightDescent</c-></code></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑦"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="FontMetrics" data-dfn-type="attribute" data-export data-readonly data-type="double" id="dom-fontmetrics-boundingboxascent"><code><c- g>boundingBoxAscent</c-></code></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑧"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="FontMetrics" data-dfn-type="attribute" data-export data-readonly data-type="double" id="dom-fontmetrics-boundingboxdescent"><code><c- g>boundingBoxDescent</c-></code></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑨"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="FontMetrics" data-dfn-type="attribute" data-export data-readonly data-type="double" id="dom-fontmetrics-fontboundingboxascent"><code><c- g>fontBoundingBoxAscent</c-></code></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①⓪"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="FontMetrics" data-dfn-type="attribute" data-export data-readonly data-type="double" id="dom-fontmetrics-fontboundingboxdescent"><code><c- g>fontBoundingBoxDescent</c-></code></dfn>;

  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#baseline" id="ref-for-baseline"><c- n>Baseline</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="FontMetrics" data-dfn-type="attribute" data-export data-readonly data-type="Baseline" id="dom-fontmetrics-dominantbaseline"><code><c- g>dominantBaseline</c-></code></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#baseline" id="ref-for-baseline①"><c- n>Baseline</c-></a>> <dfn class="dfn-paneled idl-code" data-dfn-for="FontMetrics" data-dfn-type="attribute" data-export data-readonly data-type="FrozenArray<Baseline>" id="dom-fontmetrics-baselines"><code><c- g>baselines</c-></code></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#font" id="ref-for-font"><c- n>Font</c-></a>> <dfn class="idl-code" data-dfn-for="FontMetrics" data-dfn-type="attribute" data-export data-readonly data-type="FrozenArray<Font>" id="dom-fontmetrics-fonts"><code><c- g>fonts</c-></code><a class="self-link" href="#dom-fontmetrics-fonts"></a></dfn>;
};
</pre>
   <p>The <code class="idl"><a data-link-type="idl" href="#fontmetrics" id="ref-for-fontmetrics⑦">FontMetrics</a></code> object has the following attributes:</p>
   <p><code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-width" id="ref-for-dom-fontmetrics-width">width</a></code> The advance width of the line box, in CSS pixels.</p>
   <p><code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-advances" id="ref-for-dom-fontmetrics-advances">advances</a></code> List of advances for each codepoint in the given text relative to the preceding
codepoint, in CSS pixels. Where a glyph is composed of a sequence of codepoints
the advance for the all but the first codepoint in the sequence will be zero.</p>
   <p><code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-boundingboxleft" id="ref-for-dom-fontmetrics-boundingboxleft">boundingBoxLeft</a></code> The distance parallel to the <code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-dominantbaseline" id="ref-for-dom-fontmetrics-dominantbaseline">dominantBaseline</a></code> from the alignment
point given by the text-align property to the left side of the bounding
rectangle of the given text, in CSS pixels; positive numbers indicating a
distance going left from the given alignment point.</p>
   <p class="note" role="note"><span>Note:</span> The sum of this value and <code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-boundingboxright" id="ref-for-dom-fontmetrics-boundingboxright">boundingBoxRight</a></code> can be wider
than the <code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-width" id="ref-for-dom-fontmetrics-width①">width</a></code>, in particular with slanted fonts where
characters overhang their advance width.</p>
   <p><code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-boundingboxright" id="ref-for-dom-fontmetrics-boundingboxright①">boundingBoxRight</a></code> The distance parallel to the <code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-dominantbaseline" id="ref-for-dom-fontmetrics-dominantbaseline①">dominantBaseline</a></code> from the alignment
point given by the text-align property to the right side of the bounding
rectangle of the given text, in CSS pixels. Positive numbers indicating a
distance going right from the given alignment point.</p>
   <p><code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-height" id="ref-for-dom-fontmetrics-height">height</a></code> The distance between the highest top and the lowest bottom of the em squares in
the line box, in CSS pixels.</p>
   <p><code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-emheightascent" id="ref-for-dom-fontmetrics-emheightascent">emHeightAscent</a></code> The distance from the <code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-dominantbaseline" id="ref-for-dom-fontmetrics-dominantbaseline②">dominantBaseline</a></code> to the highest top of the
em squares in the line box, in CSS pixels.
Positive numbers indicating that the <code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-dominantbaseline" id="ref-for-dom-fontmetrics-dominantbaseline③">dominantBaseline</a></code> is below
the top of that em square (so this value will usually be positive).
Zero if the <code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-dominantbaseline" id="ref-for-dom-fontmetrics-dominantbaseline④">dominantBaseline</a></code> is the top of that em square.
Half the font size if the <code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-dominantbaseline" id="ref-for-dom-fontmetrics-dominantbaseline⑤">dominantBaseline</a></code> is the middle of that
em square.</p>
   <p><code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-emheightdescent" id="ref-for-dom-fontmetrics-emheightdescent">emHeightDescent</a></code> The distance from the <code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-dominantbaseline" id="ref-for-dom-fontmetrics-dominantbaseline⑥">dominantBaseline</a></code> to the lowest bottom of
the em squares in the line box, in CSS pixels.
Positive numbers indicating that the <code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-dominantbaseline" id="ref-for-dom-fontmetrics-dominantbaseline⑦">dominantBaseline</a></code> is below
the bottom of that em square (so this value will usually be negative).
Zero if the <code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-dominantbaseline" id="ref-for-dom-fontmetrics-dominantbaseline⑧">dominantBaseline</a></code> is the bottom of that em square.</p>
   <p><code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-boundingboxascent" id="ref-for-dom-fontmetrics-boundingboxascent">boundingBoxAscent</a></code> The distance from the <code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-dominantbaseline" id="ref-for-dom-fontmetrics-dominantbaseline⑨">dominantBaseline</a></code> to the top of the
bounding rectangle of the given text, in CSS pixels; positive numbers indicating
a distance going up from the <code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-dominantbaseline" id="ref-for-dom-fontmetrics-dominantbaseline①⓪">dominantBaseline</a></code>.</p>
   <p class="note" role="note"><span>Note:</span> This number can vary greatly based on the input text, even if the first
font specified covers all the characters in the input.</p>
   <p><code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-boundingboxdescent" id="ref-for-dom-fontmetrics-boundingboxdescent">boundingBoxDescent</a></code> The distance from the <code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-dominantbaseline" id="ref-for-dom-fontmetrics-dominantbaseline①①">dominantBaseline</a></code> to the bottom of the
bounding rectangle of the given text, in CSS pixels; positive numbers indicating
a distance going down from the <code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-dominantbaseline" id="ref-for-dom-fontmetrics-dominantbaseline①②">dominantBaseline</a></code>.</p>
   <p><code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-fontboundingboxascent" id="ref-for-dom-fontmetrics-fontboundingboxascent">fontBoundingBoxAscent</a></code> The distance from the <code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-dominantbaseline" id="ref-for-dom-fontmetrics-dominantbaseline①③">dominantBaseline</a></code> to the top of the highest
bounding rectangle of all the fonts used to render the text, in CSS pixels;
positive numbers indicating a distance going up from the <code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-dominantbaseline" id="ref-for-dom-fontmetrics-dominantbaseline①④">dominantBaseline</a></code>.</p>
   <p class="note" role="note"><span>Note:</span> This value and <code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-fontboundingboxdescent" id="ref-for-dom-fontmetrics-fontboundingboxdescent">fontBoundingBoxDescent</a></code> are useful when
metrics independent of the actual text being measured are desired as the values
will be consistent regardless of the text as long as the same fonts are being
used.
The <code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-boundingboxascent" id="ref-for-dom-fontmetrics-boundingboxascent①">boundingBoxAscent</a></code> attribute (and its corresponding attribute
for the descent) are useful when metrics specific to the given text are desired.</p>
   <p><code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-fontboundingboxdescent" id="ref-for-dom-fontmetrics-fontboundingboxdescent①">fontBoundingBoxDescent</a></code> The distance from the <code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-dominantbaseline" id="ref-for-dom-fontmetrics-dominantbaseline①⑤">dominantBaseline</a></code> to the bottom of the
lowest bounding rectangle of all the fonts used to render the text, in
CSS pixels; positive numbers indicating a distance going down from the <code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-dominantbaseline" id="ref-for-dom-fontmetrics-dominantbaseline①⑥">dominantBaseline</a></code>.</p>
   <p><code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-dominantbaseline" id="ref-for-dom-fontmetrics-dominantbaseline①⑦">dominantBaseline</a></code> Reference to the dominant <code class="idl"><a data-link-type="idl" href="#baseline" id="ref-for-baseline②">Baseline</a></code> for the given text in the list of <code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-baselines" id="ref-for-dom-fontmetrics-baselines">baselines</a></code>.</p>
   <p><code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-baselines" id="ref-for-dom-fontmetrics-baselines①">baselines</a></code> List of all <code class="idl"><a data-link-type="idl" href="#baseline" id="ref-for-baseline③">Baseline</a></code>s for the given text.</p>
   <h3 class="heading settled" data-level="2.2" id="baseline-definition"><span class="secno">2.2. </span><span class="content"><code class="idl"><a data-link-type="idl" href="#baseline" id="ref-for-baseline④">Baseline</a></code> object</span><a class="self-link" href="#baseline-definition"></a></h3>
<pre class="idl highlight def"><c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="baseline"><code><c- g>Baseline</c-></code></dfn> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②"><c- b>DOMString</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Baseline" data-dfn-type="attribute" data-export data-readonly data-type="DOMString" id="dom-baseline-name"><code><c- g>name</c-></code></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①①"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Baseline" data-dfn-type="attribute" data-export data-readonly data-type="double" id="dom-baseline-value"><code><c- g>value</c-></code></dfn>;
};
</pre>
   <p>Each <code class="idl"><a data-link-type="idl" href="#baseline" id="ref-for-baseline⑤">Baseline</a></code> object represents a baseline of the measured text and has the
following attributes:</p>
   <p><code class="idl"><a data-link-type="idl" href="#dom-baseline-name" id="ref-for-dom-baseline-name">name</a></code> Name of the baseline in question.</p>
   <p><code class="idl"><a data-link-type="idl" href="#dom-baseline-value" id="ref-for-dom-baseline-value">value</a></code> Distance from the <code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-dominantbaseline" id="ref-for-dom-fontmetrics-dominantbaseline①⑧">dominantBaseline</a></code>, in CSS pixels.
Positive numbers indicating a distance going down from the <code class="idl"><a data-link-type="idl" href="#dom-fontmetrics-dominantbaseline" id="ref-for-dom-fontmetrics-dominantbaseline①⑨">dominantBaseline</a></code>.</p>
   <h3 class="heading settled" data-level="2.3" id="font-definition"><span class="secno">2.3. </span><span class="content"><code class="idl"><a data-link-type="idl" href="#font" id="ref-for-font①">Font</a></code> object</span><a class="self-link" href="#font-definition"></a></h3>
<pre class="idl highlight def"><c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="font"><code><c- g>Font</c-></code></dfn> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString③"><c- b>DOMString</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Font" data-dfn-type="attribute" data-export data-readonly data-type="DOMString" id="dom-font-name"><code><c- g>name</c-></code></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long"><c- b>unsigned</c-> <c- b>long</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Font" data-dfn-type="attribute" data-export data-readonly data-type="unsigned long" id="dom-font-glyphsrendered"><code><c- g>glyphsRendered</c-></code></dfn>;
};
</pre>
   <p>Each <code class="idl"><a data-link-type="idl" href="#font" id="ref-for-font②">Font</a></code> object represents a font that was used for at least one glyph in
the measured text. It contains the following fields:</p>
   <p><code class="idl"><a data-link-type="idl" href="#dom-font-name" id="ref-for-dom-font-name">name</a></code> Font family name.</p>
   <p><code class="idl"><a data-link-type="idl" href="#dom-font-glyphsrendered" id="ref-for-dom-font-glyphsrendered">glyphsRendered</a></code> Number of glyphs used from the specific font. If multiple fonts are required to
render the specified text this attribute will indicate how many glyphs where
used from each font.</p>
   <p class="note" role="note"><span>Note:</span> Indicates the number of glyphs which may be lower than the number of
codepoints.</p>
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="no-ref heading settled" id="conventions"><span class="content"> Document conventions</span><a class="self-link" href="#conventions"></a></h3>
  <p>Conformance requirements are expressed with a combination of
    descriptive assertions and RFC 2119 terminology. The key words “MUST”,
    “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
    “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
    document are to be interpreted as described in RFC 2119.
    However, for readability, these words do not appear in all uppercase
    letters in this specification. </p>
  <p>All of the text of this specification is normative except sections
    explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a></p>
  <p>Examples in this specification are introduced with the words “for example”
    or are set apart from the normative text with <code>class="example"</code>,
    like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example.</p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
    normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note.</p>
  <p>Advisements are normative sections styled to evoke special attention and are
    set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
    this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
  <h3 class="no-ref heading settled" id="conformance-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conformance-classes"></a></h3>
  <p>Conformance to this specification
    is defined for three conformance classes: </p>
  <dl>
   <dt>style sheet 
   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
            style sheet</a>. 
   <dt>renderer 
   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
            documents that use them. 
   <dt>authoring tool 
   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that writes a style sheet. 
  </dl>
  <p>A style sheet is conformant to this specification
    if all of its statements that use syntax defined in this module are valid
    according to the generic CSS grammar and the individual grammars of each
    feature defined in this module. </p>
  <p>A renderer is conformant to this specification
    if, in addition to interpreting the style sheet as defined by the
    appropriate specifications, it supports all the features defined
    by this specification by parsing them correctly
    and rendering the document accordingly. However, the inability of a
    UA to correctly render a document due to limitations of the device
    does not make the UA non-conformant. (For example, a UA is not
    required to render color on a monochrome monitor.) </p>
  <p>An authoring tool is conformant to this specification
    if it writes style sheets that are syntactically correct according to the
    generic CSS grammar and the individual grammars of each feature in
    this module, and meet all other conformance requirements of style sheets
    as described in this module. </p>
  <h3 class="no-ref heading settled" id="partial"><span class="content"> Partial implementations</span><a class="self-link" href="#partial"></a></h3>
  <p>So that authors can exploit the forward-compatible parsing rules to
    assign fallback values, CSS renderers <strong>must</strong> treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore
    as appropriate</a>) any at-rules, properties, property values, keywords,
    and other syntactic constructs for which they have no usable level of
    support. In particular, user agents <strong>must not</strong> selectively
    ignore unsupported component values and honor supported values in a single
    multi-value property declaration: if any value is considered invalid
    (as unsupported values must be), CSS requires that the entire declaration
    be ignored.</p>
  <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
  <p>To avoid clashes with future stable CSS features,
        the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
  <h3 class="no-ref heading settled" id="testing"><span class="content"> Non-experimental implementations</span><a class="self-link" href="#testing"></a></h3>
  <p>Once a specification reaches the Candidate Recommendation stage,
    non-experimental implementations are possible, and implementors should
    release an unprefixed implementation of any CR-level feature they
    can demonstrate to be correctly implemented according to spec. </p>
  <p>To establish and maintain the interoperability of CSS across
    implementations, the CSS Working Group requests that non-experimental
    CSS renderers submit an implementation report (and, if necessary, the
    testcases used for that implementation report) to the W3C before
    releasing an unprefixed implementation of any CSS features. Testcases
    submitted to W3C are subject to review and correction by the CSS
    Working Group. </p>
  <p>
   Further information on submitting testcases and implementation reports
    can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
    Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </p>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#dom-fontmetrics-advances">advances</a><span>, in §2.1</span>
   <li><a href="#baseline">Baseline</a><span>, in §2.2</span>
   <li><a href="#dom-fontmetrics-baselines">baselines</a><span>, in §2.1</span>
   <li><a href="#dom-fontmetrics-boundingboxascent">boundingBoxAscent</a><span>, in §2.1</span>
   <li><a href="#dom-fontmetrics-boundingboxdescent">boundingBoxDescent</a><span>, in §2.1</span>
   <li><a href="#dom-fontmetrics-boundingboxleft">boundingBoxLeft</a><span>, in §2.1</span>
   <li><a href="#dom-fontmetrics-boundingboxright">boundingBoxRight</a><span>, in §2.1</span>
   <li><a href="#dom-fontmetrics-dominantbaseline">dominantBaseline</a><span>, in §2.1</span>
   <li><a href="#dom-fontmetrics-emheightascent">emHeightAscent</a><span>, in §2.1</span>
   <li><a href="#dom-fontmetrics-emheightdescent">emHeightDescent</a><span>, in §2.1</span>
   <li><a href="#font">Font</a><span>, in §2.3</span>
   <li><a href="#dom-fontmetrics-fontboundingboxascent">fontBoundingBoxAscent</a><span>, in §2.1</span>
   <li><a href="#dom-fontmetrics-fontboundingboxdescent">fontBoundingBoxDescent</a><span>, in §2.1</span>
   <li><a href="#fontmetrics">FontMetrics</a><span>, in §2.1</span>
   <li><a href="#dom-fontmetrics-fonts">fonts</a><span>, in §2.1</span>
   <li><a href="#dom-font-glyphsrendered">glyphsRendered</a><span>, in §2.3</span>
   <li><a href="#dom-fontmetrics-height">height</a><span>, in §2.1</span>
   <li><a href="#dom-document-measureelement">measureElement(element)</a><span>, in §2</span>
   <li><a href="#dom-document-measuretext">measureText(text, styleMap)</a><span>, in §2</span>
   <li>
    name
    <ul>
     <li><a href="#dom-baseline-name">attribute for Baseline</a><span>, in §2.2</span>
     <li><a href="#dom-font-name">attribute for Font</a><span>, in §2.3</span>
    </ul>
   <li><a href="#dom-baseline-value">value</a><span>, in §2.2</span>
   <li><a href="#dom-fontmetrics-width">width</a><span>, in §2.1</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-stylepropertymapreadonly">
   <a href="https://drafts.css-houdini.org/css-typed-om-1/#stylepropertymapreadonly">https://drafts.css-houdini.org/css-typed-om-1/#stylepropertymapreadonly</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-stylepropertymapreadonly">2. Measure API</a> <a href="#ref-for-stylepropertymapreadonly①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-document">
   <a href="https://dom.spec.whatwg.org/#document">https://dom.spec.whatwg.org/#document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-document">2. Measure API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-element">
   <a href="https://dom.spec.whatwg.org/#element">https://dom.spec.whatwg.org/#element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element">2. Measure API</a> <a href="#ref-for-element①">(2)</a> <a href="#ref-for-element②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMString">
   <a href="https://heycam.github.io/webidl/#idl-DOMString">https://heycam.github.io/webidl/#idl-DOMString</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMString">2. Measure API</a> <a href="#ref-for-idl-DOMString①">(2)</a>
    <li><a href="#ref-for-idl-DOMString②">2.2. Baseline object</a>
    <li><a href="#ref-for-idl-DOMString③">2.3. Font object</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-double">
   <a href="https://heycam.github.io/webidl/#idl-double">https://heycam.github.io/webidl/#idl-double</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-double">2.1. FontMetrics object</a> <a href="#ref-for-idl-double①">(2)</a> <a href="#ref-for-idl-double②">(3)</a> <a href="#ref-for-idl-double③">(4)</a> <a href="#ref-for-idl-double④">(5)</a> <a href="#ref-for-idl-double⑤">(6)</a> <a href="#ref-for-idl-double⑥">(7)</a> <a href="#ref-for-idl-double⑦">(8)</a> <a href="#ref-for-idl-double⑧">(9)</a> <a href="#ref-for-idl-double⑨">(10)</a> <a href="#ref-for-idl-double①⓪">(11)</a>
    <li><a href="#ref-for-idl-double①①">2.2. Baseline object</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-unsigned-long">
   <a href="https://heycam.github.io/webidl/#idl-unsigned-long">https://heycam.github.io/webidl/#idl-unsigned-long</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-unsigned-long">2.3. Font object</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-typed-om-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-stylepropertymapreadonly" style="color:initial">StylePropertyMapReadOnly</span>
    </ul>
   <li>
    <a data-link-type="biblio">[DOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-document" style="color:initial">Document</span>
     <li><span class="dfn-paneled" id="term-for-element" style="color:initial">Element</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WebIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-idl-DOMString" style="color:initial">DOMString</span>
     <li><span class="dfn-paneled" id="term-for-idl-double" style="color:initial">double</span>
     <li><span class="dfn-paneled" id="term-for-idl-unsigned-long" style="color:initial">unsigned long</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-typed-om-1">[CSS-TYPED-OM-1]
   <dd>Shane Stephens; Tab Atkins Jr.; Naina Raisinghani. <a href="https://www.w3.org/TR/css-typed-om-1/">CSS Typed OM Level 1</a>. 10 April 2018. WD. URL: <a href="https://www.w3.org/TR/css-typed-om-1/">https://www.w3.org/TR/css-typed-om-1/</a>
   <dt id="biblio-dom">[DOM]
   <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-webidl">[WebIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. 15 December 2016. ED. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://dom.spec.whatwg.org/#document" id="ref-for-document①"><c- g>Document</c-></a> {
    <a class="n" data-link-type="idl-name" href="#fontmetrics" id="ref-for-fontmetrics⑧"><c- n>FontMetrics</c-></a> <a href="#dom-document-measureelement"><code><c- g>measureElement</c-></code></a>(<a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element③"><c- n>Element</c-></a> <a href="#dom-document-measureelement-element-element"><code><c- g>element</c-></code></a>);
    <a class="n" data-link-type="idl-name" href="#fontmetrics" id="ref-for-fontmetrics①①"><c- n>FontMetrics</c-></a> <a href="#dom-document-measuretext"><code><c- g>measureText</c-></code></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString④"><c- b>DOMString</c-></a> <a href="#dom-document-measuretext-text-stylemap-text"><code><c- g>text</c-></code></a>, <a class="n" data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#stylepropertymapreadonly" id="ref-for-stylepropertymapreadonly②"><c- n>StylePropertyMapReadOnly</c-></a> <a href="#dom-document-measuretext-text-stylemap-stylemap"><code><c- g>styleMap</c-></code></a>);
};

<c- b>interface</c-> <a href="#fontmetrics"><code><c- g>FontMetrics</c-></code></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①③"><c- b>double</c-></a> <a data-readonly data-type="double" href="#dom-fontmetrics-width"><code><c- g>width</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①②"><c- b>double</c-></a>> <a data-readonly data-type="FrozenArray<double>" href="#dom-fontmetrics-advances"><code><c- g>advances</c-></code></a>;

  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②①"><c- b>double</c-></a> <a data-readonly data-type="double" href="#dom-fontmetrics-boundingboxleft"><code><c- g>boundingBoxLeft</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double③①"><c- b>double</c-></a> <a data-readonly data-type="double" href="#dom-fontmetrics-boundingboxright"><code><c- g>boundingBoxRight</c-></code></a>;

  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double④①"><c- b>double</c-></a> <a data-readonly data-type="double" href="#dom-fontmetrics-height"><code><c- g>height</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑤①"><c- b>double</c-></a> <a data-readonly data-type="double" href="#dom-fontmetrics-emheightascent"><code><c- g>emHeightAscent</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑥①"><c- b>double</c-></a> <a data-readonly data-type="double" href="#dom-fontmetrics-emheightdescent"><code><c- g>emHeightDescent</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑦①"><c- b>double</c-></a> <a data-readonly data-type="double" href="#dom-fontmetrics-boundingboxascent"><code><c- g>boundingBoxAscent</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑧①"><c- b>double</c-></a> <a data-readonly data-type="double" href="#dom-fontmetrics-boundingboxdescent"><code><c- g>boundingBoxDescent</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑨①"><c- b>double</c-></a> <a data-readonly data-type="double" href="#dom-fontmetrics-fontboundingboxascent"><code><c- g>fontBoundingBoxAscent</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①⓪①"><c- b>double</c-></a> <a data-readonly data-type="double" href="#dom-fontmetrics-fontboundingboxdescent"><code><c- g>fontBoundingBoxDescent</c-></code></a>;

  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#baseline" id="ref-for-baseline⑥"><c- n>Baseline</c-></a> <a data-readonly data-type="Baseline" href="#dom-fontmetrics-dominantbaseline"><code><c- g>dominantBaseline</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#baseline" id="ref-for-baseline①①"><c- n>Baseline</c-></a>> <a data-readonly data-type="FrozenArray<Baseline>" href="#dom-fontmetrics-baselines"><code><c- g>baselines</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#font" id="ref-for-font③"><c- n>Font</c-></a>> <a data-readonly data-type="FrozenArray<Font>" href="#dom-fontmetrics-fonts"><code><c- g>fonts</c-></code></a>;
};

<c- b>interface</c-> <a href="#baseline"><code><c- g>Baseline</c-></code></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②①"><c- b>DOMString</c-></a> <a data-readonly data-type="DOMString" href="#dom-baseline-name"><code><c- g>name</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①①①"><c- b>double</c-></a> <a data-readonly data-type="double" href="#dom-baseline-value"><code><c- g>value</c-></code></a>;
};

<c- b>interface</c-> <a href="#font"><code><c- g>Font</c-></code></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString③①"><c- b>DOMString</c-></a> <a data-readonly data-type="DOMString" href="#dom-font-name"><code><c- g>name</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long①"><c- b>unsigned</c-> <c- b>long</c-></a> <a data-readonly data-type="unsigned long" href="#dom-font-glyphsrendered"><code><c- g>glyphsRendered</c-></code></a>;
};

</pre>
  <aside class="dfn-panel" data-for="dom-document-measureelement">
   <b><a href="#dom-document-measureelement">#dom-document-measureelement</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-document-measureelement">2. Measure API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-document-measuretext">
   <b><a href="#dom-document-measuretext">#dom-document-measuretext</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-document-measuretext">2. Measure API</a> <a href="#ref-for-dom-document-measuretext①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="fontmetrics">
   <b><a href="#fontmetrics">#fontmetrics</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fontmetrics">2. Measure API</a> <a href="#ref-for-fontmetrics①">(2)</a> <a href="#ref-for-fontmetrics②">(3)</a> <a href="#ref-for-fontmetrics③">(4)</a> <a href="#ref-for-fontmetrics④">(5)</a> <a href="#ref-for-fontmetrics⑤">(6)</a>
    <li><a href="#ref-for-fontmetrics⑥">2.1. FontMetrics object</a> <a href="#ref-for-fontmetrics⑦">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-fontmetrics-width">
   <b><a href="#dom-fontmetrics-width">#dom-fontmetrics-width</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-fontmetrics-width">2.1. FontMetrics object</a> <a href="#ref-for-dom-fontmetrics-width①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-fontmetrics-advances">
   <b><a href="#dom-fontmetrics-advances">#dom-fontmetrics-advances</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-fontmetrics-advances">2.1. FontMetrics object</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-fontmetrics-boundingboxleft">
   <b><a href="#dom-fontmetrics-boundingboxleft">#dom-fontmetrics-boundingboxleft</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-fontmetrics-boundingboxleft">2.1. FontMetrics object</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-fontmetrics-boundingboxright">
   <b><a href="#dom-fontmetrics-boundingboxright">#dom-fontmetrics-boundingboxright</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-fontmetrics-boundingboxright">2.1. FontMetrics object</a> <a href="#ref-for-dom-fontmetrics-boundingboxright①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-fontmetrics-height">
   <b><a href="#dom-fontmetrics-height">#dom-fontmetrics-height</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-fontmetrics-height">2.1. FontMetrics object</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-fontmetrics-emheightascent">
   <b><a href="#dom-fontmetrics-emheightascent">#dom-fontmetrics-emheightascent</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-fontmetrics-emheightascent">2.1. FontMetrics object</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-fontmetrics-emheightdescent">
   <b><a href="#dom-fontmetrics-emheightdescent">#dom-fontmetrics-emheightdescent</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-fontmetrics-emheightdescent">2.1. FontMetrics object</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-fontmetrics-boundingboxascent">
   <b><a href="#dom-fontmetrics-boundingboxascent">#dom-fontmetrics-boundingboxascent</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-fontmetrics-boundingboxascent">2.1. FontMetrics object</a> <a href="#ref-for-dom-fontmetrics-boundingboxascent①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-fontmetrics-boundingboxdescent">
   <b><a href="#dom-fontmetrics-boundingboxdescent">#dom-fontmetrics-boundingboxdescent</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-fontmetrics-boundingboxdescent">2.1. FontMetrics object</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-fontmetrics-fontboundingboxascent">
   <b><a href="#dom-fontmetrics-fontboundingboxascent">#dom-fontmetrics-fontboundingboxascent</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-fontmetrics-fontboundingboxascent">2.1. FontMetrics object</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-fontmetrics-fontboundingboxdescent">
   <b><a href="#dom-fontmetrics-fontboundingboxdescent">#dom-fontmetrics-fontboundingboxdescent</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-fontmetrics-fontboundingboxdescent">2.1. FontMetrics object</a> <a href="#ref-for-dom-fontmetrics-fontboundingboxdescent①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-fontmetrics-dominantbaseline">
   <b><a href="#dom-fontmetrics-dominantbaseline">#dom-fontmetrics-dominantbaseline</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-fontmetrics-dominantbaseline">2.1. FontMetrics object</a> <a href="#ref-for-dom-fontmetrics-dominantbaseline①">(2)</a> <a href="#ref-for-dom-fontmetrics-dominantbaseline②">(3)</a> <a href="#ref-for-dom-fontmetrics-dominantbaseline③">(4)</a> <a href="#ref-for-dom-fontmetrics-dominantbaseline④">(5)</a> <a href="#ref-for-dom-fontmetrics-dominantbaseline⑤">(6)</a> <a href="#ref-for-dom-fontmetrics-dominantbaseline⑥">(7)</a> <a href="#ref-for-dom-fontmetrics-dominantbaseline⑦">(8)</a> <a href="#ref-for-dom-fontmetrics-dominantbaseline⑧">(9)</a> <a href="#ref-for-dom-fontmetrics-dominantbaseline⑨">(10)</a> <a href="#ref-for-dom-fontmetrics-dominantbaseline①⓪">(11)</a> <a href="#ref-for-dom-fontmetrics-dominantbaseline①①">(12)</a> <a href="#ref-for-dom-fontmetrics-dominantbaseline①②">(13)</a> <a href="#ref-for-dom-fontmetrics-dominantbaseline①③">(14)</a> <a href="#ref-for-dom-fontmetrics-dominantbaseline①④">(15)</a> <a href="#ref-for-dom-fontmetrics-dominantbaseline①⑤">(16)</a> <a href="#ref-for-dom-fontmetrics-dominantbaseline①⑥">(17)</a> <a href="#ref-for-dom-fontmetrics-dominantbaseline①⑦">(18)</a>
    <li><a href="#ref-for-dom-fontmetrics-dominantbaseline①⑧">2.2. Baseline object</a> <a href="#ref-for-dom-fontmetrics-dominantbaseline①⑨">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-fontmetrics-baselines">
   <b><a href="#dom-fontmetrics-baselines">#dom-fontmetrics-baselines</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-fontmetrics-baselines">2.1. FontMetrics object</a> <a href="#ref-for-dom-fontmetrics-baselines①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="baseline">
   <b><a href="#baseline">#baseline</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-baseline">2.1. FontMetrics object</a> <a href="#ref-for-baseline①">(2)</a> <a href="#ref-for-baseline②">(3)</a> <a href="#ref-for-baseline③">(4)</a>
    <li><a href="#ref-for-baseline④">2.2. Baseline object</a> <a href="#ref-for-baseline⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-baseline-name">
   <b><a href="#dom-baseline-name">#dom-baseline-name</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-baseline-name">2.2. Baseline object</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-baseline-value">
   <b><a href="#dom-baseline-value">#dom-baseline-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-baseline-value">2.2. Baseline object</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="font">
   <b><a href="#font">#font</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-font">2.1. FontMetrics object</a>
    <li><a href="#ref-for-font①">2.3. Font object</a> <a href="#ref-for-font②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-font-name">
   <b><a href="#dom-font-name">#dom-font-name</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-font-name">2.3. Font object</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-font-glyphsrendered">
   <b><a href="#dom-font-glyphsrendered">#dom-font-glyphsrendered</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-font-glyphsrendered">2.3. Font object</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>